<template>
    <div>
        <DetailTop v-if="playDetail.creator!=undefined" :playDetail="playDetail"/>
        <DetailList v-if="playList.length>0&&playDetail.subscribedCount" :playList="playList" :subscribedCount="playDetail.subscribedCount"/>
    </div>
</template>

<script lang="ts">
import { onMounted } from "vue";
import { useRoute } from "vue-router";
import {getPlayList,getPlayDetail} from "@/utils/api.js"
import { reactive ,toRefs} from "vue";
import DetailTop from "@/components/MusicItemDetail/DetailTop.vue";
import DetailList from "@/components/MusicItemDetail/DetailList.vue"
import { useStore } from "vuex";

export default({
    
components:{
    DetailTop,
    DetailList

},

setup() {
    const store=useStore()
    const state=reactive({
        playList:[],
        playDetail:{}
            
        })
       async function getAllSongs(){
        const response=await getPlayList({id:useRoute().params.id,limit:20,offset:0})
        console.log(response)
        if(response.data&&response.data.code==200){
            state.playList=response.data.songs
            // store.commit("changePlayList",response.data.songs)
        }
       }
       getAllSongs()
        
onMounted(async()=>{
    console.log("挂载后",store.state.isPlaying)
 
 let id=useRoute().params?.id
 
    try{
        const response=await getPlayDetail({id})
    
        if(response.data&&response.data.code===200){
            console.log(response)
           
            state.playDetail=response.data.playlist
            
        }
        
        
        
    }catch(err){
        console.log(err)
    }
})
return {
    ...toRefs(state)
};
},
});
</script>

<style scoped>

</style>